import Preparation from '../../shared/preparation.md'
import { Tabs, Tab, PackageManagerTabs } from '@theme';

# React ESM MF

demo项目仓库 `emp`:

```bash
git clone https://github.com/empjs/emp
```

:::danger 🚨 可能遇到的错误
如果您无法拉取项目至本地，请检查您的网络环境或代理设置是否可以访问github，如果仍不能解决，请联系我们。
:::

在拉取完成代码后，我们进入代码的根目录，安装项目依赖，推荐使用`PNPM`进行安装：

<PackageManagerTabs command="install" />

安装完依赖后，先运行 `projects/esm-react-host` 示例项目，再运行 `projects/esm-react-app` 示例项目

## 运行示例项目

:::warning ⚠️ 注意
在运行示例项目之前，请确保您已经完成了前期准备，并当前目录处于`emp`仓库的根目录下。
:::

### mf-host

首先进入示例项目的根目录：

```bash
cd projects/esm-react-host
```

然后运行代码：
<PackageManagerTabs command="dev" />

`再打开多一个终端`，运行:

```bash
cd projects/esm-react-app
```

然后运行代码：
<PackageManagerTabs command="dev" />

运行成功后，您可以访问`http://localhost:3302/`进行查看。


## 演示效果

当您的代码运行成功之后，它应该是这样子的🤩：<a target='_blank' href='https://4f54e3c2.emp-demo-react18-app.pages.dev/demos/react18/react-app/dist/'>访问链接</a>

<iframe src="https://4f54e3c2.emp-demo-react18-app.pages.dev/demos/react18/react-app/dist/"
  style={{width: '100%', height: '1100px', border: `20px solid #aaa`, borderRadius: '4px', overflow: 'hidden'}}
  title="mf-host"
></iframe>

当前`esm`支持基础库使用`浏览器原生ESM`方式引入。需要开启配置:
```jsonc
//...
empShare {
    //...
    "useImportMap": true,
    //...
}
```
并在`empShare.shareLib`中配置对应的原生`importmap`配置。


<img src="https://hd-static.yystatic.com/46188100590015524.png" />